<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  在线引入vue.js  不推荐使用  网络通畅-->
    <!--   <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>-->
    <!--    引入本地的vue.js文件-->
    <script src="../js/vue.js"></script>
</head>
<body>

<div id="app">
    <span>hello javascript</span>
</div>


<script>
    // 1. 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的
    /*
    *   语法点:
    *      1.  编写template模板时 需要有根节点且只能有一个根节点
    *      2. 使用template模板时,会覆盖初始化容器中的内容
    *
    *  问题:  template中编写模板时,是以字符串的形式进行编写的  如果后续模板比较复杂,则会有字符串拼接问题,编写时没有提示
    * */
    let vm = new Vue({
        template: '<div>' +
                     '<span>hello Vue</span>' +
                    '<ul>' +
                    '<li>1</li>' +
                    '<li>2</li>' +
                    '<li>3</li>' +
                    '</ul>' +
                 '</div>'
    })

    // 2. 建立vm实例和初始化容器的关联关系
    // vm.$mount(document.getElementById("app"))
    vm.$mount("#app")
</script>


</body>
</html>